<template>
  <!--  公告-->
  <view class="schedule-view">
    <view v-if="index === 0">
      <HeaderNavTabarVue
        v-if="!showContent"
        :iconFont="'icon-sousuo'"
        title="公告"
        @rightIcon="handleSearch"
      />
      <view class="uv-empty" v-if="noticeList.length === 0">
        <uv-empty mode="list" icon="../../static/images/empty.png"></uv-empty>
      </view>
      <view v-else>
        <!--    列表-->
        <view v-if="!showContent">
          <uni-swipe-action>
            <uni-swipe-action-item v-for="(item, index) in noticeList" :key="index">
              <view class="msg-list" @tap="handleTap(item)">
                <view class="list-left">
                  <view class="list-right">
                    <view class="msg-type-author">
                      <h4 v-if="item.top === 1" style="color: red">置顶</h4>
                      <h4
                        style="
                          width: 400rpx;
                          text-wrap: nowrap;
                          text-overflow: ellipsis;
                          overflow: hidden;
                          text-align: left;
                        "
                      >
                        {{ item.noticeTitle }}
                      </h4>
                    </view>
                    <!--                <text class="time-txt">333</text>-->
                  </view>
                </view>
                <view style="display: flex; flex-direction: column; align-items: flex-end">
                  <h4>{{ item.createBy }}</h4>
                  <p v-if="item.createTime" class="time-txt">{{ item.createTime.slice(5) }}</p>
                </view>
              </view>
            </uni-swipe-action-item>
          </uni-swipe-action>
        </view>
        <!--    内容-->
        <view v-else>
          <view style="display: flex; justify-content: space-between; background-color: #ffffff">
            <view></view>
            <HeaderNavTabarVue
              :iconFont="'icon-cuowuguanbiquxiao'"
              :title="currentItem.noticeTitle"
              @rightIcon="showContent = false"
            />
          </view>
          <uv-parse
            :content="currentItem.noticeContent"
            :preview-img="true"
            :selectable="true"
            container-style="margin: 20rpx; 20rpx; 0; 20rpx"
          ></uv-parse>
        </view>
        <uv-modal
          ref="modal"
          :showCancelButton="true"
          title="搜索"
          @cancel="handleCancel"
          @confirm="handleConfirm"
        >
          <view style="width: 100%">
            <uv-input v-model="searchContent" placeholder="请输入标题" />
          </view>
        </uv-modal>
      </view>
    </view>

    <view v-if="index === 1">
      <HeaderNavTabarVue :title="'公告管理'" @rightIcon="" />

      <uni-swipe-action>
        <uni-swipe-action-item v-for="(item, index) in noticeList" :key="index">
          <template v-slot:right>
            <view class="topUpBtn" @tap="putNoticeBtn(item, 1)" v-show="item.top === 0">
              <iconpark-icon :size="rpxTopx(40)" fill="#fff" name="to-top"></iconpark-icon>
              <text> 置顶</text>
            </view>
            <view class="topUpBtn-cancel" @tap="putNoticeBtn(item, 0)" v-show="item.top === 1">
              <iconpark-icon :size="rpxTopx(40)" fill="#fff" name="to-top"></iconpark-icon>
              <text> 取消置顶</text>
            </view>
            <view class="deleteBtn" @tap="deleteNoticeBtn(item.noticeId)">
              <iconpark-icon :size="rpxTopx(40)" fill="#fff" name="delete"></iconpark-icon>
              <text> 删除</text>
            </view>
          </template>
          <view class="msg-list" @tap="handleTap(item)">
            <view class="list-left">
              <view class="list-right">
                <view class="msg-type-author">
                  <h4 v-if="item.top === 1" style="color: red">置顶</h4>
                  <h4
                    style="
                      width: 400rpx;
                      text-wrap: nowrap;
                      text-overflow: ellipsis;
                      overflow: hidden;
                      text-align: left;
                    "
                  >
                    {{ item.noticeTitle }}
                  </h4>
                </view>
              </view>
            </view>
            <view style="display: flex; flex-direction: column; align-items: flex-end">
              <h4>{{ item.createBy }}</h4>
              <p v-if="item.createTime" class="time-txt">{{ item.createTime.slice(5) }}</p>
            </view>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>
    </view>
    <uv-tabbar :value="index" activeColor="#165DFF" @change="tabChange">
      <uv-tabbar-item text="公告">
        <template v-slot:inactive-icon>
          <image
            class="icon"
            src="@/static/icon/gonggao.svg"
            style="width: 40rpx; height: 40rpx"
          ></image>
        </template>
        <template v-slot:active-icon>
          <image
            class="icon"
            src="@/static/icon/gonggao-active.svg"
            style="width: 40rpx; height: 40rpx"
          ></image>
        </template>
      </uv-tabbar-item>
      <uv-tabbar-item text="管理">
        <template v-slot:inactive-icon>
          <image
            class="icon"
            src="@/static/icon/guanli.svg"
            style="width: 40rpx; height: 40rpx"
          ></image>
        </template>
        <template v-slot:active-icon>
          <image
            class="icon"
            src="@/static/icon/guanli-active.svg"
            style="width: 40rpx; height: 40rpx"
          ></image>
        </template>
      </uv-tabbar-item>
    </uv-tabbar>
  </view>
</template>

<script setup>
import HeaderNavTabarVue from '@/components/HeaderNavTabar/HeaderNavTabar.vue'
import { defineProps, ref, watch } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { deleteNotice, listNotice, putNotice } from '@/api/announcement'
import { rpxTopx } from '@/hook/convertUnit'
import { attendanceRuleApi } from '@/api/attendance'
import { getUserProfile } from '@/api/system/user'

const index = ref(0)
const props = defineProps({
  title: {
    type: String,
    default: '',
    required: true,
  },
})

// const index = ref(0)
const noticeList = ref([1, 2, 3])
const queryParams = ref({
  pageNum: 1,
  pageSize: 9999,
  noticeTitle: undefined,
  createBy: undefined,
  status: undefined,
  top: undefined,
})

onShow(() => {})
listNotice(queryParams.value).then((response) => {
  noticeList.value = response.rows
})
const tabChange = (e) => {
  index.value = e
}
const showContent = ref(false)
const currentItem = ref({
  title: '',
  content: '',
})

const deleteNoticeBtn = async (noticeId) => {
  let params = {
    noticeId,
  }
  uni.showModal({
    title: '删除',
    content: '是否删除这条公告', //模板中提示的内容
    success: async (res) => {
      //点击复制内容的后调函数
      if (res.confirm) {
        let { code } = await deleteNotice(params)
        if (code === 200) {
          uni.showToast({
            title: '删除成功',
          })
          listNotice(queryParams.value).then((response) => {
            noticeList.value = response.rows
          })
        }
      }
    },
  })
}

const putNoticeBtn = async (v, type) => {
  let params = {
    noticeId: v.noticeId,
    top: type,
  }
  let { code } = await putNotice(params)
  if (code === 200) {
    listNotice(queryParams.value).then((response) => {
      noticeList.value = response.rows
    })
  }
}
const handleTap = (item) => {
  currentItem.value = item
  showContent.value = true
}
const modal = ref(null)
const searchContent = ref('')
const handleSearch = () => {
  modal.value.open()
}
const handleCancel = () => {
  modal.value.close()
}

const handleConfirm = () => {
  modal.value.close()
  queryParams.value.noticeTitle = searchContent.value
}

watch(
  queryParams,
  () => {
    listNotice(queryParams.value).then((response) => {
      noticeList.value = response.rows
    })
  },
  { deep: true }
)
</script>

<style lang="scss" scoped>
@import '@/static/style/index.scss';

h4 {
  color: #000000;
  text-align: center;
  font-size: 30rpx;
  font-style: normal;
  font-weight: 500;
}

.schedule-view {
  .huiyi-box-list {
    padding: 32rpx;

    .header-box {
      @include flex(center, space-between);

      p {
        text {
          color: #165dff;
          font-size: 28rpx;
          font-style: normal;
          font-weight: 400;
        }
      }
    }
  }
}

.todo-container {
  //padding: 20rpx;

  .todo-item-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    padding: 20rpx;
    border-bottom: 2rpx solid #f0f0f0;
  }

  .show-completed-chip-inactive {
    //color: #165dff;
    font-style: normal;
    font-weight: 400;
  }

  .show-completed-chip-active {
    color: #165dff;
    font-size: 28rpx;
    font-style: normal;
    font-weight: 400;
  }

  .todo-item {
    display: flex;
    flex-grow: 1;
    margin-left: 20rpx;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;

    background-color: #ffffff;

    .title {
      font-size: 32rpx;
      color: #333;
    }

    .creator {
      font-size: 28rpx;
      color: #999;
    }

    .participants {
      font-size: 28rpx;
      color: #999;
    }
  }
}

:deep(.uni-swipe) {
  .topUpBtn {
    background: #165dff;
  }

  .topUpBtn-cancel {
    background: #c9cdd4;
  }

  .deleteBtn {
    background: #f53f3f;
  }

  .topUpBtn,
  .topUpBtn-cancel,
  .deleteBtn {
    @include flex($align: center, $flex-column: column);

    color: #fff;
    width: 160rpx;
    @include flex($align: center, $justify: center);
  }
}

.msg-list {
  @include flex($align: center, $justify: space-between);
  background-color: #fff;
  height: 124rpx;
  padding: 0 $spacing-row-base;

  &:active {
    background-color: #eff0f2;
  }

  .list-left {
    @include flex($align: center);

    image {
      width: 92rpx;
      height: 92rpx;
      margin-right: 16rpx;
    }

    .msg-type-author {
      @include flex($align: center);

      h4 {
        margin-right: 16rpx;
        color: #1d2129;
        font-family: 'PingFang SC';
        font-size: 32rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 44.8rpx;
      }

      p {
        text-align: center;
        font-family: 'PingFang SC';
        font-size: 20rpx;
        font-style: normal;
        font-weight: 500;
        padding: 3rpx 8rpx;
        border-radius: 4rpx;
      }

      .机器人 {
        background: $warning-card-bg;
        color: $warning-card-text-color;
        font-weight: 500;
      }

      .绩效考核 {
        background: $success-card-bg;
        color: $success-card-text-color;
        font-weight: 500;
      }

      .应用 {
        background: $btn-bg;
        color: $btn-bg-color;
        font-weight: 500;
      }

      .金圣龙 {
        background: $btn-error-bg;
        color: $btn-error-color;
        font-weight: 500;
      }
    }

    text {
      align-self: stretch;
      color: #86909c;
      font-family: 'PingFang SC';
      font-size: 24rpx;
      font-style: normal;
      font-weight: 400;
      line-height: 33.6rpx;
      margin-top: 8rpx;
    }
  }

  .list-right {
    .time-txt {
      color: #86909c;
      text-align: right;
      font-family: 'PingFang SC';
      font-size: 24rpx;
      font-style: normal;
      font-weight: 400;
      line-height: 33.6rpx;
    }
  }

  .time-txt {
    color: #86909c;
    text-align: right;
    font-family: 'PingFang SC';
    font-size: 24rpx;
    font-style: normal;
    font-weight: 400;
    line-height: 33.6rpx;
  }
}
</style>
